<template>
<a-form :form="form"  ref="form"  v-model="form" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
          <component
        :is="config.type"
        v-for="config of configs"
        :key="config.prop"
        :form="form"
        :config="config"
        v-bind="$attrs"
        v-on="$listeners"
      >
        <slot :name="config.prop" :config="config" :form="form" />
      </component>
    <a-button type="primary" html-type="submit">
        Submit
      </a-button>
</a-form>
</template>
<script>
import FormInput from './FormInput'
import FormSelect from './FormSelect'
import FormRadio from './FormRadio'
export default{
    name: 'DynamicForm',
    components: {
        FormInput,
        FormSelect,
        FormRadio
  },
    props:{
     form: {
      type: Object,
      default: () => ({})
    },
    configs: {
      type: Array,
      default: () => []
    }
    },
    data(){
        return{
             forms: this.$form.createForm(this, { name: 'coordinated' })
        }
    },
    methods: {
       handleSubmit(e) {
            e.preventDefault()
        console.log(this.form, 'form')
    }
    }
}
</script>